import React, { useState, useEffect } from 'react';  
import '../ccss/ThreeTable.css';  
  
const ThreeTable = () => {  
  const [currentSlide, setCurrentSlide] = useState(0);  
  const slides = [  
     { city: '北京', enterprise:'百度', post: '经理',salary:"19k" },  
    { city: '北京', enterprise:'小米', post: '程序员',salary:"15k" },  
    { city: '天津', enterprise:'字节跳动', post: '外包员工',salary:"13k" },
    { city: '杭州', enterprise:'腾讯公司', post: '程序员',salary:"12k" },  
    { city: '重庆', enterprise:'91传媒', post: '经理',salary:"25k" },  
    { city: '深圳', enterprise:'大象集团', post: '面试官',salary:"8k" }, 
     { city: '西安', enterprise:'广仔娱乐', post: '总经理',salary:"18k" }, 
  
  ];  
  
  // 计算要显示的幻灯片索引  
  const visibleSlides = [];  
  for (let i = -1; i <= 1; i++) { // 通常我们只显示前后各2个幻灯片，所以i <= 2  
    const slideIndex = (currentSlide + i + slides.length) % slides.length;  
    visibleSlides.push(slideIndex);  
  }  
  
  useEffect(() => {  
    const interval = setInterval(() => {  
      setCurrentSlide((prevSlide) => (prevSlide === slides.length - 1 ? 0 : prevSlide + 1));  
    }, 2500); // 每2.5秒切换一次  
  
    return () => clearInterval(interval); // 组件卸载时清除定时器  
  }, []);  
  
  return (  
    <div className="carousel-container">  
      <div className='octop'>  
        <span>城市</span>  
        <span>公司</span>  
        <span>职位</span>  
        <span>薪资</span>  
      </div>  
      {visibleSlides.map((slideIndex) => (  
        <div  
          key={slideIndex}  
          className={`carousel-slide ${slideIndex === currentSlide ? 'active' : 'inactive'}`}  
        >  
          <div className={`slide-content ${slideIndex !== currentSlide ? 'preview' : ''}`}>  
            <span>{slides[slideIndex].city}</span>  
            <span>{slides[slideIndex].enterprise}</span>  
            <span>{slides[slideIndex].post}</span>  
            <span>{slides[slideIndex].salary}</span>  
          </div>  
        </div>  
      ))}  
    </div>  
  );  
};  
  
export default ThreeTable;